.ya-photo {
  height: 100%;
  .p-header{
    display: flex;
    align-items: center;
    padding: 0 30%;
    margin: 30px 20px 20px 20px;
    li{
      list-style: none;
      flex: 1;
      text-align: center;
      padding: 5px;
      &:hover, &.active {
        a {
          color: #000000;
          font-weight: 500;
          cursor: pointer;
        }
      }
      a {
        text-decoration: none;
        color: #4c4c4c;
      }
    }
  }
  .home{
    text-align: center;
    height: calc(100% - 100px);
    box-shadow: 1px 5px 10px 1px #f3f3f3;

    .mainImg{
      height: 100%;
      background: white;
      margin: 10px 0;
      padding: 20px;
    }
  }
  .cover {

    display: flex;
    flex-wrap: wrap;

    &::after {
      //解决最后一排排不满的问题，排不满，after一个grow很大的空位
      content: '';
      flex-grow: 10;
      min-width: 200px;
      height: 0;
    }

    .item {
      position: relative;
      display: none;
      margin: 5px;

      i {
        display: block;
        line-height: 0;
      }

      img {
        vertical-align: bottom;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .findMe{
    padding: 20px;
    text-align: center;
    .headPortrait{
      height: 200px;
      width: 200px;
    }
    .introduce{
      padding: 20px calc(50% - 100px);
      div{
        line-height: 26px;
        width: 200px;
        text-align: left;
      }
    }
    .price{

    }
  }
  .ya-photoGroup{
    .title{
      padding: 20px;
      text-align: center;
      .name {
        font-weight: 800;
        font-size: 30px;
      }
    }
    .end{
      padding: 20px 0;
      text-align: center;
      color: #6f6f6f;
    }
  }
}
@media all and (orientation: portrait) {
  .ya-main{
  }
  .ya-photo{
    .p-header{
        padding: 0;
        margin: 30px 0 20px 0;
    }
    .home{
      .mainImg{
        height: auto;
        width: calc(100% - 40px);
      }
    }
    .stream {
      .item {
        margin: 10px;
      }
    }
  }
}